<template>
	<scroll-view class="page b-bg haveBar">
		<view class="userBox">
			<view class="logoBox" @tap='goIndex'>
				<image src="../../static/img/logo.png" mode="" class="logo"></image>
			</view>
			<!-- <view class="user">
				<text class="iconfont icon-wode2"></text> 13100688807
			</view> -->
			<!-- <view class="user"></view> -->
			<!-- <user></user> -->
		</view>
	    <banner :banner_image="banner_image"></banner>
		<view class="block">
			  <tab current="4" scrollLeft="500" :goId='goId'></tab>
		</view>
		<view class="block work-works">
			<view class="work-works-inner add-form">
				<view class="add-row">
					<view class="ad-label">
						参赛年份：
					</view>
					<view class="ad-inputBox">
					 <uni-data-select
						  v-model="form_data.year"
						  :localdata="range_year"
						  :clear="false"
						></uni-data-select>
					</view>
				</view>
				<view class="add-row">
					<view class="ad-label">
						参赛角色：
					</view>
					<view class="ad-inputBox">
					 <uni-data-select
						  v-model="form_data.role_id"
						  :localdata="range_role"
						  :clear="false"
						></uni-data-select>
					</view>
				</view>
				<view class="add-row">
					<view class="ad-label">
						作者姓名：
					</view>
					<view class="ad-inputBox">
						 <uni-easyinput type="text"
						 :clear="false"
						 clearSize='0'
						 v-model="form_data.username"
						 placeholder="输入投稿人姓名" />
					</view>
				</view>
				<view class="add-row">
					<view class="ad-label">
						作者编号：
					</view>
					<view class="ad-inputBox">
						 <uni-easyinput type="text"
						 :clear="false"
						 clearSize='0'
						 v-model="form_data.on"
						 placeholder="输入作品编号" />
					</view>
				</view>
			   <!-- <view class="add-row">
			    	<view class="ad-label">
			    		图形验证：
			    	</view>
			    	<view class="ad-inputBox">
			    		 <uni-easyinput type="text"
			    		 :clear="false"
			    		 clearSize='0'
			    		 v-model="form_data.num"
			    		 placeholder="输入作品编号" />
			    	</view>
			    </view> -->
				<view class="nextBtn">
					<view class="bt bt-a" @tap="nextStep">查询</view>
				</view>
			</view>
		</view>
		<barCon :is_up="is_up"></barCon>
	</scroll-view>
	
</template>

<script>
	import mixin from '@/util/mixin.js';
	export default {
		mixins: [mixin],
		data() {
			return {
				form_data:{
					role_id:'',
					year:'',
					username:"",
					on:''
				},
				range_role:[],
				range_year:[]
			};
		},
		onLoad(options) {
			this.goId = options.id;
			this.getYear();
			
		},
		methods:{
			async getYear() {
				const res = await this.$http({
					url:'activity/year',
					method:'get',
					data:{}
				})
				// console.log(res);
				this.range_year = res.map((item) =>{
					return {
						text:item.year,
						value:item.year
					}
				})
				this.range_year.unshift({
					text:'请选择',
					value:""
				})
				this.getRole();
			},
			async getRole() {
				const res = await this.$http({
					url:'activity/role/' + this.goId,
					method:'get',
					data:{}
				})
				this.range_role = res.map((item) =>{
					return {
						text:item.name,
						value:item.id
					}
				})
				this.range_role.unshift({
					text:'请选择',
					value:""
				})
			},
			async nextStep() {
				if(!this.form_data.year) {
					this.toast('请选择参赛年份');
					return;
				}
				if(!this.form_data.role_id) {
					this.toast('请选择参赛角色');
					return;
				}
				if(!this.form_data.username) {
					this.toast('请填写投稿人姓名');
					return;
				}
				if(!this.form_data.on) {
					this.toast('请填写作品编号');
					return;
				}
				const postData = this.form_data;
				const res = await this.$http({
					url:'activity/search/' + this.goId,
					method:'get',
					data:postData
				})
				if(res) {
					uni.setStorageSync('cert',res);
					uni.navigateTo({
						url:'/pages/result/result'
					})
				} else {
					this.toast("未查询到数据")
				}
			}
		}
	}
</script>

<style lang="scss">
   .page {
   		.add-form {
   			padding: 0;
   		}
   	}
   .block {
   	  width: 100%;
   	  padding: 0rpx 34rpx 40rpx;
   }
   .work-infoBox {
	       // padding-bottom: 0;
	   .work-inner {
		   background-color: #fff;
		   padding: 28rpx;
		   padding-bottom: 7rpx;
		   border-radius: $border-radius;
		   .img-title {
			   width: 281rpx;
			   height: 66rpx;
		   }
		   .work-cont {
			   font-size: 28rpx;
			   line-height: 1.6;
			   .p {
				   margin-bottom: 20rpx;
			   }
		   }
	   }
   }
   .work-works {
	  .work-works-inner {
		  background-color: #fff;
		  padding: 30rpx 30rpx;
		  border-radius: $border-radius;
	  }
	  .items {
	  	  display: flex;
	  	  justify-content: space-between;
	  	  flex-wrap: wrap;
		  padding-top: 26rpx;
	  	  .item-price {
	  		  width: 310rpx;
	  		  padding-bottom: 32rpx;
	  		  position: relative;
			  .onePrice {
				  background-color: #f24545;
				  border-radius:20rpx 0 20rpx 0;
				  color:#fff;
				  display: inline-block;
				  font-size: 12rpx;
				  padding: 6rpx 18rpx;
				  margin-right: 10rpx;
				  &.two {
					  background-color: #ffad4c;
				  }
			  }
			  .colloct {
				  position: absolute;
				  right: 0;
				  top:0;
				  width: 100rpx;
				  height: 100rpx;
				  color:#f24545;
				  @include center()
				  .iconfont {
					  font-size: 56rpx;
				  }

			  }
			  .tpBtn {
				  width: 100%;
				  height: 67rpx;
				  background-color: #f24545;
				  color: #fff;
				  margin-top: 20rpx;
				  border-radius: 8rpx;
				  font-size: 30rpx;
				  @include center();
				  &.disable{
					  background-color: #f5dede;
					  color:#fff;
				  }
			  }
	  		  .in-lab {
	  			  position: absolute;
	  			  right: 0;
	  			  top:0;
	  			  border-radius: 0 $border-radius 0 $border-radius !important;
	  			  padding: 8rpx 18rpx;
	  			  background-color: #f24545;
	  			  color:#fff;
	  			  font-size: 26rpx;
	  			  &.disable {
	  				  background-color: #e3cbcb;
	  				  color:#fff;
	  			  }
	  		  }
	  		  .imgBox {
	  		  		width: 100%;
	  				height: 232rpx;
	  				border-radius: $border-radius;
	  				overflow: hidden;
	  		  }
	  		  .in-title {
	  			  padding-top: 20rpx;
	  			  height: 100rpx;
	  			  font-size: 30rpx;
	  			  font-weight: 550;
	  			  @include textTwo();
	  		  }
	  		  .in-f-title {
	  			  padding-top: 18rpx;
	  			  font-size: 28rpx;
	  			   @include text();
	  		  }
	  		  .in-time {
	  			  padding-top: 18rpx;
	  			  font-size: 26rpx;
	  			  color:#cccccc;
	  		  }
	  	  }
	  }
   }
   .add-form {
   		   padding: 0;
   		   .add-row {
   			   &.school {
   				    .ad-label { 
   						width: 220rpx;
   					}
   					.ad-inputBox  {
   						width: 444rpx;
						
   					}
   			   }
			   
   			   background-color: #fff;
   			   display: flex;
   			   border-radius: 16rpx;
   			   margin-bottom: 16px;
   			   .ad-label {
   				 width: 180rpx;
   				 height: 100rpx;
   				 font-size: 28rpx;
   				 @include center();
   			   }
   			   .ad-inputBox {
   				 width: 510rpx;
   				 height: 100rpx;
				 background-color: #f7f7f7 !important;
				 border-radius: 7px;
   				 @include center();
   			   }
   		   }
		   .nextBtn {
			   padding: 30rpx 0;
			   @include bt-s-1();
		   }
   }
</style>
